<template>
<div id="swipera">
  <!-- 使用mint-ui来展示轮播图 -->
  <mt-swipe :auto="4000" >
         <mt-swipe-item  v-for="item in imgs" :key="item.id">
        <img class="img" :src="'https://gw.alicdn.com/tfs/' + item.smallPicUrl" />

         </mt-swipe-item>
		  </mt-swipe>
</div>

</template>

<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

export default {
    name:'swiper',
<<<<<<< HEAD
    data() {
        return {
     imgs:[]
        };
=======
     data() {
        return {
    //  imgs:[]
        };
    },
    props: {
      imgs: {
  		type: Array,
  		default: () => []
  	 }
>>>>>>> e7617aa47937d6a0a7547f5c8938bb8805ae057b
    },
   
    created() {

    },
    mounted() {
    this.getimgs()
    },
    watch: {
       imgs(){
       this.$nextTick(()=>{
           new Swiper('.swiper-container',{
                loop:true,
                pagination:{el:'.swiper-pagination'} ,
<<<<<<< HEAD
=======
			    paginationClickable: true,
			    autoplay : 100,
				autoplayDisableOnInteraction : false,
>>>>>>> e7617aa47937d6a0a7547f5c8938bb8805ae057b
           })
       })
      }
    },
    methods: {
     async getimgs() {
           let url = "/movie/swiper";
           let data=  await this.$axios.get(url)
           console.log(data);
           console.log(data.data.data.returnValue);
           this.imgs = data.data.data.returnValue
      }
    
    },

    components: {


    },
};
</script>

<style>
img {
		width: 100%;
		height: auto;
	}
	#swiper .swiper-pagination-bullet {
		background: #e5e8e8;
		opacity: 1; 
	}
	#swiper .swiper-pagination-bullet-active {
		background: #ff5733;
	}
  /* 这是更改之后新添加的样式 */
    #swipera{
    height: 10rem;
  }
</style>
